<template>
  <div class="mydrawer">
    <el-drawer v-model="drawer.visible" :title="`${props.info?.appName} 共享范围`" @close="hide">
      <div class="w-full text-[12px] box">
        <div class="flex w-full justify-between items-center topbox">
          <div class="btnbox">
            <el-button icon="Plus" color="#507AEC" type="primary" @click="showShareAdd">添加帐户</el-button>
          </div>
          <!-- <div class="ml-auto w-[200px] searchbox">
          <el-input v-model="queryParams.appName" placeholder="请输入帐户名称/ID" suffix-icon="Search" clearable @keyup.enter="handleQuery" />
        </div> -->
        </div>
        <div class="mt-[20px] tabelList">
          <el-table ref="roleTableRef" v-loading="loading" :data="list">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column label="账户范围" prop="accountInfo" :show-overflow-tooltip="true">
              <template #default="scope">
                <div class="flex flex-col">
                  <div class="name"></div>
                  <div class="text-[#999] text-[12px] id">ID:{{ scope.row?.accountInfo?.accountId }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="账户类型" prop="remark" :show-overflow-tooltip="true" width="150">
              <template #default="scope">
                <div class="text-[12px]">{{ scope.row?.accountInfo?.accountType === 'AD' ? '巨量广告' : scope.row?.accountInfo?.accountType }}</div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="80">
              <template #default="scope">
                <!-- <el-button v-hasPermi="['advertisement:account:remove']" size="small" text>取消共享</el-button> -->
                <div
                  v-hasPermi="['advertisement:account:remove']"
                  @click="handleRemove(scope.row)"
                  class="cursor-pointer text-[#999] text-[12px] hover:text-[#409EFF]"
                >
                  取消共享
                </div>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </el-drawer>

    <AddShareAccount ref="addShareAccountRef" :appTenantId="appTenantId" title="字节小程序共享" :type="AssetType.BytedApplets" />
  </div>
</template>

<script setup lang="ts">
import { shareRangeList } from '@/api/advertisement/byte';
import { ShareRangeVO, ShareRangeQuery, ShareRangeForm, ByteVO } from '@/api/advertisement/byte/types';
import { useAppStore } from '@/store/modules/app';
import { AssetType } from '@/api/advertisement/account/types';
import { bpAssetManagementShareCancel } from '@/api/advertisement/account';

const appStore = useAppStore();

const props = defineProps<{
  info: ByteVO | undefined;
}>();

const loading = ref(false);

const appTenantId = ref<string | number>(''); //小程序资产id

const list = ref<ShareRangeVO[]>([]);

const addShareAccountRef = ref();

const drawer = reactive<DialogOption>({
  visible: false
});
const initForm: ShareRangeForm = {
  status: '0'
};
const data = reactive<PageData<ShareRangeForm, ShareRangeQuery>>({
  form: { ...initForm },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    accountId: undefined,
    instanceId: undefined,
    assetType: 'BYTED_APPLETS'
  },
  rules: {
    // status: [{ required: true, message: '授权方式不能为空', trigger: 'blur' }]
  }
});
const { form, queryParams, rules } = toRefs(data);

const total = ref(0);

/**
 * 搜索按钮操作
 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

const handleRemove = (row: ShareRangeVO) => {
  ElMessageBox.confirm('确定取消共享吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      // 执行删除操作

      // bpAssetManagementShareCancel({
      //   instanceId: props.info?.instanceId as number,
      //   organizationId: appStore.accountId
      // });
      console.log('执行删除操作');
    })
    .catch(() => {
      // 取消操作
    });
};

const getList = async () => {
  if (!props.info) return;
  queryParams.value.accountId = appStore.accountId;
  queryParams.value.instanceId = props.info.instanceId as number;
  loading.value = true;
  const resp = await shareRangeList(queryParams.value);
  list.value = resp.rows;
  total.value = resp.total;
  loading.value = false;
};

watch(
  () => [appStore.accountId, props.info?.instanceId],
  () => {
    if (props.info.instanceId) {
      getList();
    }
  }
);

const showShareAdd = () => {
  appTenantId.value = props.info.instanceId;
  addShareAccountRef.value?.show();
  hide();
};

const show = () => {
  drawer.visible = true;
};

const hide = () => {
  drawer.visible = false;
};

onMounted(() => {});

defineExpose({ show });
</script>

<style lang="scss" scoped>
::v-deep(.el-drawer__header) {
  margin-bottom: 15px !important;
}
</style>
